<template>
	<div class="w1200 page">
		<div class="page-content clearfix">
			<div class="left-menu left">
				<div class="user-title flex flex-align-center">
					<img class="user-icon" :src="userIcon" alt="" />
					个人中心
				</div>
				<p @click="menuClick(0)" class="menu-item" :class="menuIndex==0?'selected-menu':''" :to="{name:'UserInfo'}">基础信息</p>
				<p @click="menuClick(1)" class="menu-item" :class="menuIndex==1?'selected-menu':''" :to="{name:'Coupon'}">卡券管理</p>
			</div>
			<div class="content right">
				<router-view></router-view>
			</div>
		</div>
		
	</div>
</template>

<script>
	import userIcon from '@/assets/images/ic_us.png'
	import defaultPortrait from '@/assets/images/default_portrait.png'
	export default{
		name:'UCenter',
		data(){
			return{
				userIcon,
				defaultPortrait,
				menuIndex:0,
			}
		},
		watch:{
			"$route":{
				deep: true,
				immediate: true,
				handler(){
					if(this.$route.path.includes('/home/ucenter/userinfo')){
						this.menuIndex=0
					}else{
						this.menuIndex=1
					}
				}
			}
		},

		methods:{
			menuClick(index){
				this.menuIndex=index
				this.$router.push({name:index==0?'UserInfo':'Coupon'})
			}
		}
	}
</script>

<style scoped lang="scss">
.page{
	background: #f5f5f5;
}
.left-menu{
	width: 220px;
	height: 600px;
	background: #fff;
	.user-title{
		padding-left: 38px;
		font-size:16px;
		color:#333;
		font-weight:bold;
		height:80px;
		.user-icon{
			width: 24px;
			height: 24px;
			margin-right: 16px;
		}
	}
	.menu-item{
		display: block;
		width: 220px;
		height: 50px;
		background: #fff;
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		color: #333;
		cursor: pointer;
		transition: all .3s;
		&:hover{
			background: #f5f5f5;
		}
	}
	.selected-menu{
		background: #0088EA!important;
		color: #fff;
	}
}
.content{
	width: 970px;
	height: 600px;
	background: #fff;
}
</style>